import React, { useEffect, useState } from 'react';
import { Form, Button, Modal, Select , Input } from 'antd';
import {  getGroupList, getUserList } from '../service';

const UpdateForm = ({
  onSubmit: handleUpdate,
  onCancel: handleUpdateModalVisible,
  updateModalVisible,
}) => {
  const [form] = Form.useForm();
  const [groupList, setGroupList] = useState([]);
  const [userList, setUserList] = useState([]);
  useEffect(() => {
    getGroupList().then((data) => {
      setGroupList(data.data);
    });
    getUserList().then((data) => {
      setUserList(data.data);
    });
    // queryDepart({ depart: '1' }).then((data) => {
    //   setDepartList(data)
    // })
  }, []);
  const handleConfirm = async (fieldsValue) => {
    console.log('%%%%%%%5')
    console.log(fieldsValue)
    let params={
      ...fieldsValue,
      name:fieldsValue.name
    }
    handleUpdate(params);
  };
  const handleChange=(v)=>{
    console.log("******下拉*******")
    console.log(v)
    userList.forEach((item)=>{
      if(item.name==v){
        form.setFieldsValue({
          mail:item.mail
        })
      }
    })
  }
  const RenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        form={form}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item label="部门" name="group" rules={[{ required: true, message: '请选择部门!' }]}>
          <Select placeholder="" allowClear>
            {groupList.map((item) => (
              <Select.Option value={item.group} key={item.group}>
                {item.group}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请选择姓名!' }]}>
          <Select placeholder="" allowClear onChange={(v)=>{handleChange(v)}}>
            {userList.map((item) => (
              <Select.Option value={item.id} key={item.name}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="邮箱" name="mail" rules={[{ required: true}]}>
          <Input  disabled/>
        </Form.Item>
        <Form.Item label="用户权限组" name="type" rules={[{ required: true, message: '请选择权限!' }]}>
          <Select placeholder="" allowClear>
            <Select.Option value="2">基础用户</Select.Option>
            <Select.Option value="3">普通用户</Select.Option>
            <Select.Option value="1">管理员用户</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            {' '}
            创建{' '}
          </Button>
        </Form.Item>
      </Form>
    );
  };

  return (
    <Modal
      width={640}
      destroyOnClose
      title="添加权限"
      visible={updateModalVisible}
      footer={null}
      onCancel={() => handleUpdateModalVisible()}
    >
      <RenderContent />
    </Modal>
  );
};

export default UpdateForm;
